<template>
  <div>
    <Head title="运营商信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="90"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="方案配置">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="90"
          align="left"
        ></Detail>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { stationActivityDetail } from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';
import { WEEK } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

const optionsS = reactive({
  promotionalType: [] as any,
});

queryDicByParent({
  listDtos: [
    'stationTargetType',
    'stationActivityTargetType',
    'promotionalType',
  ],
}).then((res: any) => {
  if (res) {
    detailForm[1].dic = res.stationTargetType;
    detailForm1[5].dic = res.stationActivityTargetType;
    optionsS.promotionalType = res.promotionalType;
  }
});

const detailForm: any = reactive([
  {
    label: '方案名称',
    prop: 'name',
  },
  {
    label: '活动电站',
    prop: 'stationType',
    comName: 'radio',
    dic: [] as any,
    type: Number,
  },
]);
const detailForm1 = reactive([
  {
    label: '活动时间',
    prop: 'startTime',
    template: (row: any) => {
      return row.startTime && row.endTime
        ? `${row.startTime} 至 ${row.endTime}`
        : '-';
    },
  },
  {
    label: '限制周天',
    prop: 'week',
    comName: 'checkbox',
    dic: WEEK,
  },
  {
    label: '活动介绍',
    prop: 'introduce',
  },
  {
    label: '电费优惠',
    prop: 'powerPromotionalType',
    template: (row: any) => {
      const type = optionsS.promotionalType[row.powerPromotionalType];
      if (!type) return '--';
      if (row.powerPromotionalType === 0) {
        return row.powerPromotionalAmount === 0
          ? `${type.label} 0元/度`
          : `${type.label} ${row.powerPromotionalAmount || '--'}元/度`;
      } else {
        return row.powerPromotionalRatio === 0
          ? `${type.label} 0%`
          : `${type.label} ${row.powerPromotionalRatio || '--'}%`;
      }
      // return row.powerPromotionalType === 0
      //   ? `${type.label} ${row.powerPromotionalAmount || '--'}元/度`
      //   : `${type.label} ${row.powerPromotionalRatio || '--'}%`;
    },
  },
  {
    label: '服务费优惠',
    prop: 'servicePromotionalType',
    template: (row: any) => {
      const type = optionsS.promotionalType[row.servicePromotionalType];
      if (!type) return '--';
      if (row.servicePromotionalType === 0) {
        return row.servicePromotionalAmount === 0
          ? `${type.label} 0元/度`
          : `${type.label} ${row.servicePromotionalAmount || '--'}元/度`;
      } else {
        return row.servicePromotionalRatio === 0
          ? `${type.label} 0%`
          : `${type.label} ${row.servicePromotionalRatio || '--'}%`;
      }
      // return row.servicePromotionalType === 0
      //   ? `${type.label} ${row.servicePromotionalAmount || '--'}元/度`
      //   : `${type.label} ${row.servicePromotionalRatio || '--'}%`;
    },
  },
  {
    label: '限制用户',
    prop: 'targetType',
    comName: 'radio',
    dic: [] as any,
    type: Number,
  },
]);

const data = reactive({
  detailData: {} as any,
});
stationActivityDetail(id).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;
  // 电站树
  if (res.stationType != 0) {
    detailForm.push({
      label: '',
      prop: 'stationTree',
      comName: 'tree',
      dic: res.stationTree,
    });
  }

  // 用户树
  if (res.targetType !== 0) {
    detailForm1.push({
      label: '',
      prop: 'targetTree',
      comName: 'tree',
      dic: res.targetTree,
    });
  }
});
</script>